<template>
  <div class="file-preview">
    <!-- Image files -->
    <image-viewer v-if="isImage" :images="[cleanedUrl]" width="60px" height="60px" />
    
    <!-- PDF files -->
    <div v-else-if="isPdf" class="file-item">
      <t-icon name="file-pdf" size="24px" />
      <a :href="cleanedUrl" target="_blank" class="file-link">{{ cleanedName }}</a>
    </div>
    <!-- word files -->
    <div v-else-if="isWord" class="file-item">
      <t-icon name="file-word" size="24px" />
      <a :href="cleanedUrl" target="_blank" class="file-link">{{ cleanedName }}</a>
    </div>
    <!-- excel files -->
    <div v-else-if="isExcel" class="file-item">
      <t-icon name="file-excel" size="24px" />
      <a :href="cleanedUrl" target="_blank" class="file-link">{{ cleanedName }}</a>
    </div>
    
    <!-- CAD files -->
    <div v-else-if="isCad" class="file-item">
      <t-icon name="file" size="24px" />
      <a :href="cleanedUrl" target="_blank" class="file-link">{{ cleanedName }}</a>
    </div>
    
    <!-- Other files -->
    <div v-else class="file-item">
      <t-icon name="file-unknown" size="24px" />
      <a :href="cleanedUrl" target="_blank" class="file-link">{{ cleanedName }}</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import ImageViewer from '@/components/image-viewer/index.vue';

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
});

// Clean the file name by removing trailing }
const cleanedName = computed(() => {
  if (props.file.name.endsWith('}')) {
    return props.file.name.slice(0, -1);
  }
  return props.file.name;
});

// Clean the URL by removing everything after comma and any trailing }
const cleanedUrl = computed(() => {
  let url = props.file.url;
  // Split at first comma and take the first part
  if (url.includes(',')) {
    url = url.split(',')[0];
  }
  // Remove trailing } if present
  if (url.endsWith('}')) {
    url = url.slice(0, -1);
  }
  // Trim any whitespace
  return url.trim();
});

const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
const pdfExtensions = ['pdf'];
const wordExtensions = ['doc', 'docx'];
const excelExtensions = ['xls', 'xlsx'];
const cadExtensions = ['dwg', 'dxf'];

const fileExtension = computed(() => {
  const parts = cleanedName.value.split('.');
  return parts.length > 1 ? parts.pop()?.toLowerCase() : '';
});

const isImage = computed(() => fileExtension.value && imageExtensions.includes(fileExtension.value));
const isPdf = computed(() => fileExtension.value && pdfExtensions.includes(fileExtension.value));
const isWord = computed(() => fileExtension.value && wordExtensions.includes(fileExtension.value));
const isExcel = computed(() => fileExtension.value && excelExtensions.includes(fileExtension.value));
const isCad = computed(() => fileExtension.value && cadExtensions.includes(fileExtension.value));
</script>

<style scoped>
/* Your existing styles remain unchanged */
.preview-thumbnail {
  width: 120px;
  cursor: pointer;
}

.thumbnail-image {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.file-name {
  margin-top: 4px;
  font-size: 12px;
  word-break: break-all;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.file-link {
  color: inherit;
  text-decoration: none;
  max-width: 200px;
  word-break: break-all;
}

.file-link:hover {
  color: var(--td-brand-color);
}
</style>